<template>
  <q-page class="q-ma-sm">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" :error="$v.fields.name.$error" v-model="fields.name"
                 :float-label="$v.fields.name.$error ? '服务名称必填': '服务名称'"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.name_en" float-label="服务英文名"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.url" float-label="外部域名"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-select class="q-ma-sm" separator :options="OutterIpSource.items" v-model="fields.OutterIpSource" float-label="外网IP"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.innerUrl" float-label="内部域名"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" :error="$v.fields.innerIp.$error" :warning="msg.innerIp !== ''" v-model="fields.innerIp"
                 :float-label="$v.fields.innerIp.$error ? '内网IP必填': msg.innerIp === '' ? '内网IP' : msg.innerIp"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-select class="q-ma-sm" :error="$v.fields.serviceType.$error" separator :options="type.items"
                  :float-label="$v.fields.serviceType.$error ? '请选择类型' : '服务类型'" v-model="fields.serviceType"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-select class="q-ma-sm" :error="$v.fields.status.$error" separator :options="status.items"
                  :float-label="$v.fields.status.$error ? '请选择状态' : '状态'" v-model="fields.status"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-select class="q-ma-sm" :error="$v.fields.env.$error" separator :options="env.items" @input="$store.commit('editService/clearBoth')"
                  :float-label="$v.fields.env.$error ? '请选择环境' : '环境'" v-model="fields.env"/>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12">
        <q-select class="q-ma-sm col-xs-12 col-sm-12 col-md-12" multiple v-model="fields.host" :options="selectedHost"
                  float-label="主机" filter clearable chips separator readonly
                  @click.native="$store.dispatch('editService/serviceEnv')"/>
      </div>
    </div>
    <q-layout-footer>
      <q-toolbar style="min-height:35px;">
        <q-toolbar-title></q-toolbar-title>
        <q-btn class="q-mr-sm" color="info" icon="done" @click.native="submit">提交</q-btn>
        <q-btn class="q-mr-sm" color="negative" icon="priority_high" @click.native="$store.dispatch('editService/deleteData')">删除</q-btn>
        <q-btn class="q-mr-sm" color="secondary" icon="clear" @click.native="$store.dispatch('frame/jump', '/listservice')">返回</q-btn>
      </q-toolbar>
    </q-layout-footer>
    <q-modal v-model="positionModal" position="right">
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn flat round dense @click="positionModal = false" icon="reply"/>
          <q-toolbar-title>可选主机</q-toolbar-title>
        </q-toolbar>
        <div class="q-ma-xs">
          <q-table class="q-ma-sm" ref="table" color="primary" :data="tableData" :columns="columns" row-key="label"
                   :loading="loadSelect" :rows-per-page-options="rowsPerPageOptions" selection="multiple"
                   :selected.sync="selectedHost" :filter="search" :pagination.sync="pgn">
            <template slot="top-right" slot-scope="props">
              <q-search clearable v-model="search" placeholder="name"/>
            </template>
          </q-table>
        </div>
      </q-modal-layout>
    </q-modal>
  </q-page>
</template>

<script>
import editServiceModule from '../../store/editService'
import { required } from 'vuelidate/lib/validators'
import { QSpinnerGears } from 'quasar'
export default {
  preFetch ({ store, currentRoute }) {
    store.registerModule('editService', editServiceModule)
    store.state.editService.loading.show({spinner: QSpinnerGears})
    store.dispatch('editService/loadData', currentRoute.params.serviceId)
  },
  name: 'EditService',
  data: function () {
    return this.$store.state.editService
  },
  validations: {
    fields: {
      name: { required },
      innerIp: { required },
      serviceType: { required },
      status: { required },
      env: { required }
    }
  },
  methods: {
    submit () {
      this.$v.fields.$touch()
      if (this.$v.fields.$error) {
        this.$q.notify('请修正页面错误！')
        return
      }
      this.$store.dispatch('editService/save')
    }
  },
  watch: {
    selectedHost () {
      this.$store.commit('editService/watchSelectedHost')
    }
  },
  beforeDestroy () {
    this.$store.commit('editService/reset')
    this.fields = {host: []}
    this.$store.unregisterModule('editService')
  }
}
</script>

<style>
</style>
